<!-- <template>
    <ContentField>
        shopping
    </ContentField>
</template>



<script>
import ContentField from '@/components/ContentField.vue'

export default {
    components: {
        ContentField
    }
}
</script>



<style scoped>
</style>

 -->
<template>
    <div class="container table-responsive">
        <table id="shopping" class="table table-hover table-sm">
            <thead>
                <tr>
                    <th style="width:50%">名称</th>
                    <th style="width:10%">价格</th>
                    <th style="width:8%">数量</th>
                    <th style="width:22%" class="text-center">总计</th>
                    <th style="width:10%"></th>
                </tr>
            </thead>

            <transition-group name="list-shopping-shopping" tag="tbody">
                <app-cart-item
                v-for="shoppingItem in shoppingItemList"
                :shoppingItem="shoppingItem"
                :key="shoppingItem.id"
                ></app-cart-item>
            </transition-group>

            <tfoot>
                <tr class="d-table-row d-sm-none">
                <td class="text-center">
                    <strong>总计 ￥{{ shoppingValue }}</strong>
                </td>
                </tr>
                <tr>
                <td>
                    <button class="btn btn-warning" @click="returnToHomePage">
                    <i class="fa fa-angle-left"></i> 继续购物
                    </button>
                </td>
                <td colspan="2" class="d-none d-sm-table-cell"></td>
                <td class="d-none d-sm-table-cell text-center">
                    <strong>总计 ￥{{ shoppingValue }}</strong>
                </td>
                <td class="px-0">
                    <button class="btn btn-success" @click="checkout">
                    <span class="text-nowrap">
                        立即下单！ <i class="fa fa-angle-right d-inline"></i>
                    </span>
                    </button>
                </td>
                </tr>
            </tfoot>
        </table>
    </div>
</template>

<script>
import { computed } from '@vue/runtime-core'
import { useRouter } from 'vue-router' 
import { useStore } from 'vuex'
import ShoppingItem from '@/components/ShoppingItem.vue'
export default {
    components: {
        appCartItem: ShoppingItem,
    },
    setup() {
        const store = useStore()
        const router = useRouter()
        let shoppingItemList = computed(() => { return store.getters.shoppingItemList; })
        let goodsList = computed(() => { return store.getters.goodsList; })
        let shoppingValue = computed(() => { return parseFloat(store.getters.shoppingValue).toFixed(2); })
        const addMessage = ({message, messageClass}) => {
            store.commit('addMessage', {message, messageClass})
        }

        const clearShoppingList = () => {
            store.dispatch('clearShoppingList')
        }

        const returnToHomePage = () => {
            if (!store.state.user.is_login) {
                addMessage({
                    message: 'Please login to checkout',
                    messageClass: 'warning'
                })
            }
            else {
                router.push({name: 'home'})
            }
        }

        const checkValidshopping = (itemList, prodList) => {
            let isValid = true
            let message = ''
            let data = Array.from(itemList)

            data.map((item) => {
                for (let prodIdx = 0; prodIdx < prodList.length; prodIdx++) {
                    if (prodList[prodIdx].id == item.id) {
                        if (prodList[prodIdx].quantity < item.quantity) {
                            message = `只有 ${prodList[prodIdx].quantity} ${item.title} 个在售啦！`
                            isValid = false
                            return
                        }
                        break
                    }
                }
            })
            return {
                isValid,
                message
            }
        }

        const checkout = () => {
            if (store.state.user.is_login) {
                if (!shoppingItemList || shoppingItemList.length == 0) {
                    addMessage({
                        message: 'Your shopping is empty!',
                        messageClass: 'warning'
                    })
                    return
                }
                let { isValid, message } = checkValidshopping(
                    shoppingItemList,
                    goodsList
                )

                if (isValid) {
                    store.dispatch('saveToTransaction',{
                        shoppingItemList: store.getters.shoppingItemList,
                        id: store.state.user.id,
                    }).then(() => {
                        addMessage({
                            message: 'Your order has been successfully processed!',
                            messageClass: 'success'
                        })
                        // store.dispatch('saveShopping',{
                        //     shoppingItemList: [],
                        //     uid: store.state.user.id,
                        // })
                        clearShoppingList()
                        router.push({name: 'home'})
                    })
                } else {
                    addMessage({
                        message: message,
                        messageClass: 'danger'
                    })
                }
            } else {
                addMessage({
                    message: 'Please login to checkout',
                    messageClass: 'warning'
                })
            }
        }


        return {
            shoppingItemList,
            goodsList,
            shoppingValue,
            addMessage,
            clearShoppingList,
            checkValidshopping,
            checkout,
            returnToHomePage
        }
    }
}
</script>

<style lang="scss" scoped>
.list-shopping-shopping-leave-active {
transition: all 0.4s;
}

.list-shopping-shopping-leave-to {
opacity: 0;
transform: translateX(50px);
}

.table-sm {
font-size: 0.875rem;
::v-deep h4 {
    font-size: 1.25rem;
}
}
</style>
